<template>
	<view class="container" v-if="show">
		<scroll-view  scroll-y="true" class="evaluate">
			<view class="top">
				<view class="uni-title uni-common-mt uni-common-pl">请选择职工</view>
				<view class="search">
					<view><input type="text" placeholder="请输入职工姓名" v-model="keyword"></view>
					<view class="search-btn" @click="search">搜索</view>
				</view>
			</view>
			<view class="lists">
				<block v-for="(item,index) in items">
					<view class="item" @click="select(index)">{{item.realname}}</view>
				</block>
			</view>
		</scroll-view>
		<view class="maskLayer" @click.stop="close"></view>
	</view>
</template>

<script>
	import {
			memberList
		} from '@/api/merchant/member.js';

	import helper from '@/utils/helper.js';
	export default {
		components: {},
		props: {

		},
		data() {
			return {
				show: false,
				items: [
				],
				current: 0,
				page:1,
				pageSize:15,
				keyword:''
			}
		},
		created() {
			this.getMember();
		},
		onReady() {
			
		},
		watch: {


		},
		filters: {
			//转整
			toInt(val) {
				return helper.toInt(val);
			}
		},
		methods: {
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			select: function(index) {
				var item = this.items[index];
				this.close();
				this.$emit('selectMember',item);
				
			},
			reset(){
				this.page = 1;
				this.items = [];
			},
			search(){
				this.reset();
				this.getMember(true);
			},
			getMember:function(showLoading = false){
				var that = this;
				var param={
					page:this.page,
					'per-page':this.pageSize,
					realname:this.keyword
				}
				if(showLoading){
					uni.showLoading({
						title:'加载中'
					})
				}
				this.$http.get(`${memberList}`, param)
					.then(async data => {
						uni.hideLoading();
						if (data.code == 200) {
							var data = data.data;
							that.items = data;
						}
					});
			},
		}
	}
</script>

<style lang="scss">
	.evaluate {
		background-color: #fff;
		position: fixed;
		width: 80%;
		z-index: 99;
		top: 10vh;
		max-height: 85vh;
		left: 10%;
		padding: 30rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		overflow: scroll;
		//.top{position: fixed;top:0;}
		.search{
			border:1px solid #ececec; display: flex;justify-content: space-between;align-items: center;
			input{padding-left: 20rpx;}
			.search-btn{
				padding: 20rpx 20rpx 20rpx 0;
			}
		}
		.uni-title{font-weight: bold;margin-bottom: 30rpx;}
		.lists{display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 20rpx;}
		.item{border: 1px solid #ececec;width: 45%;padding: 25rpx 0;text-align: center;margin-bottom: 20rpx;border-radius: 10rpx;justify-content: center;}
	
	}
</style>